<template>
  <div>
    <el-dialog
      :visible="isShow"
      :title="`为${info.name}分配权限`"
      @close="closeEvent"
    >
      <!-- el-trre
   data 要展示的数据
  props label 	指定节点标签为节点对象的某个属性值
  node-key 唯一标识
  show-checkbox 是否显示勾选框
  check-strictly 父子节点是否关联
  default-checked-keys 默认勾选的节点的 key 的数组
   -->

      <el-tree
        ref="tree"
        :data="treeData"
        :props="{ label: 'name' }"
        node-key="id"
        :default-checked-keys="permIds"
        show-checkbox
        check-strictly
      />
      <template #footer>
        <div style="text-align: center">
          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { changetreeData } from '@/utils/index.js'
import { sysPermission } from '@/api/permission.js'
import { sysRoleGet, sysRoleAssignPremPut } from '@/api/setting'
export default {
  model: {
    prop: 'isShow'
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: [],
      id: '',
      permIds: [],
      info: {}
    }
  },
  created() {
    this.getData()
    console.log(this.info)
  },
  methods: {
    // 关闭按钮
    closeEvent() {
      this.$emit('input', false)
      // setCheckedKeys 设置被选择的项  必须设置node-key  清空
      this.$refs.tree.setCheckedKeys([])
    },
    // 获取数据
    async getData() {
      const res = await sysPermission()
      this.treeData = changetreeData(res.data, '0')
      console.log(res, '权限点')
    },
    // 获取被选中的节点
    async getRoleInfo(id) {
      this.id = id
      const res = await sysRoleGet(id)
      // this.permIds = res.data.permIds
      this.info = res.data
      // setCheckedKeys 设置被选择的项  必须设置node-key
      this.$refs.tree.setCheckedKeys(res.data.permIds)
      console.log(res, '5555555', this.permIds)
    },
    // 提交按钮
    async submit() {
      // this.$refs.tree.getCheckedKeys() 获取当前被选择的节点
      this.permIds = this.$refs.tree.getCheckedKeys()
      await sysRoleAssignPremPut({
        id: this.id,
        permIds: this.permIds
      })
      this.$message.success('分配成功')
      this.closeEvent()
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>

<style></style>
